<template>
    <main>
        <mdui-top-app-bar scroll-target=".scroll">
            <mdui-top-app-bar-title>默写记录</mdui-top-app-bar-title>
            <div style="flex-grow: 1"></div>
            <div>
                <mdui-button variant="tonal" :class="{ mm_all_btn: true, more_border_all: isManyManage }"
                    @click="chall">反选</mdui-button>
                <mdui-button variant="tonal" :class="{ mm_rem_btn: true, more_rem_btn: isManyManage }"
                    @click="removeAll">删除</mdui-button>
                <mdui-button variant="elevated" @click="isManyManage = !isManyManage"
                    :class="{ mm_btn: true, more_border_btn: isManyManage }">批量管理</mdui-button>

            </div>
        </mdui-top-app-bar>
        <div class="scroll">
            <mdui-card clickable style="width: 100%; height: 124px" v-for="(item, index) in wordSheets" :key="item._id"
                @click="start_dictation(item.id, item.name)" class="word-sheet-card">
                <div :class="{ 'left-btn': true, 'left-btn-hide': isManyManage }">
                    <mdui-checkbox :value="item.id" ref="checkbox_items" @click.stop></mdui-checkbox>
                </div>
                <div :class="{ 'content': true, 'content-is-mm': isManyManage }">

                    <span style="line-height: 50px;padding-left: 10px;font-size: 18px;">{{ item.name }}</span><br>
                    <span style="line-height: 20px;padding-left: 10px;font-size: 13px;">单词总数：{{ item.total
                        }}</span><br>
                    <span style="line-height: 20px;padding-left: 10px;font-size: 13px;">默写时间：{{ formatTime(item.time)
                        }}</span><br>
                    <span style="line-height: 20px;padding-left: 10px;font-size: 13px;">正答率：{{
                        Math.floor(item.correctRate
                            * 100) / 100 }}%</span><br>

                </div>
                <div class="right-btn"
                    :style="{ opacity: isManyManage ? '0' : '1', filter: isManyManage ? 'blur(5px)' : 'none' }">

                    <mdui-button-icon @click.stop="remove_sheet(item.id, item.name)">
                        <SvgIcon :path="mdiDelete" type="mdi" />
                    </mdui-button-icon>

                </div>
            </mdui-card>
        </div>
    </main>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiPlus, mdiDelete, mdiPencil } from '@mdi/js'
import { prompt } from "mdui/functions/prompt.js";
import { snackbar } from 'mdui/functions/snackbar.js';
import { confirm } from "mdui/functions/confirm.js";
import router from '@/router';
import { formatTime } from '@/assets/helper';

// 数据存储
const wordSheets = ref([]) // 存储单词表数据
const isManyManage = ref(false) // 是否批量管理
const checkbox_items = ref(null) // 用于存储复选框引用

let id = 0
// 获取localStorage所有以dic-开头的数据
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    if (key.startsWith('dic-')) {
        const value = JSON.parse(localStorage.getItem(key))
        const vs = key.split('-')
        let total = 0
        let errNum = 0
        value.data.forEach(v => {
            total += v.data.length
            v.data.forEach(item => {
                if (item.word.toLowerCase() != item.ans.toLowerCase()) {
                    errNum++
                }
            })
        })
        wordSheets.value.push({
            name: value.name + " 的默写",
            data: value.data,
            total: total,
            correctRate: (total - errNum) / total * 100,
            time: Number(vs[2]),
            _id: vs[1],
            id: key,
            i: id
        })
        id++
    }
}

const remove_sheet = (id, name) => {
    confirm({
        headline: "删除默写记录",
        description: "确定要删除默写记录" + name + "吗？",
        confirmText: "删除",
        cancelText: "取消",
        onConfirm: () => {
            wordSheets.value = wordSheets.value.filter(sheet => sheet.id !== id);
            localStorage.removeItem(id)
        }
    })
}

const chall = () => {
    if (!checkbox_items.value) {
        snackbar({
            message: "没有可选的单词表",
        });
        isManyManage.value = false; // 取消批量管理状态
        return;
    }
    // 如果没全选则全选，如果已经 全选则取消全选
    for (let i = 0; i < checkbox_items.value.length; i++) {
        checkbox_items.value[i].checked = !checkbox_items.value[i].checked;
    }

}

const removeAll = () => {
    if (!checkbox_items.value) {
        snackbar({
            message: "没有可选的单词表",
        });
        isManyManage.value = false; // 取消批量管理状态
        return;
    }
    const selectedIds = checkbox_items.value.filter(item => item.checked).map(item => item.value);
    if (selectedIds.length === 0) {
        snackbar({
            message: "请至少选择一个单词表",
        });
        isManyManage.value = false; // 取消批量管理状态
        return;
    }
    console.log(selectedIds);

    confirm({
        headline: "删除默写记录",
        description: `确定要删除 ${selectedIds.length} 个默写记录吗？`,
        confirmText: "删除",
        cancelText: "取消",
        onConfirm: () => {
            wordSheets.value = wordSheets.value.filter(sheet => !selectedIds.includes(sheet.id));

            isManyManage.value = false; // 取消批量管理状态
            for (const id of selectedIds) {
                localStorage.removeItem(id);
            }
        }
    })
    isManyManage.value = false; // 取消批量管理状态
}

function start_dictation(id, name) {

    router.push({
        name: 'hist',
        params: { id: id }
    });
}
</script>

<style scoped>
main {
    height: 100%;
    width: 100%;
    position: relative;
}

.scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.word-sheet-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
    margin-bottom: 10px;



    .right-btn {
        transition: all 0.3s ease;
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }

    .left-btn {
        transition: all 0.3s ease;
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transform: scale(0);
        transform-origin: left;
        opacity: 0;
        filter: blur(5px);
    }

    .content {
        transition: transform 0.3s ease;
        flex-grow: 1;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-60px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.left-btn-hide {
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: blur(0) !important;
}

.content-is-mm {
    transform: translateX(0) !important;
}

.more_border_btn {
    border-radius: 8px 30px 30px 8px !important;

    transform: translateX(0px) !important;
}

.more_border_all {
    border-radius: 30px 8px 8px 30px !important;

    transform: translateX(-8px) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    filter: blur(0) !important;
}

.more_rem_btn {

    border-radius: 8px 8px 8px 8px !important;
    transform: translateX(-4px) scale(1) !important;
    opacity: 1 !important;
    filter: blur(0) !important;
    pointer-events: auto !important;
}

.mm_rem_btn {
    transition: all 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 50ms;
    border-radius: 30px 30px 30px 30px;
    transform: translateX(80px);
    z-index: 1;
    opacity: 0.2;
    pointer-events: auto;
    filter: blur(5px);
}

.mm_btn {
    transition: all 0.3s ease;
    border-radius: 30px 30px 30px 30px;

    transform: translateX(0px);
    z-index: 3;
}

.mm_all_btn {
    transition: all 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 70ms;
    border-radius: 30px 30px 30px 30px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transform: scale(0.8) translateX(160px);
    filter: blur(5px);
}
</style>